import React, {useEffect} from 'react';
import RequestHandler from "http/RequestHandler";
import {GatewayRoute} from "type/entity/GatewayRoute";
import {Card, Space, Table} from "antd";
import {columnDataIndex, columnRemark} from "columns";
import {Link} from "react-router-dom";
import TableToolbar from "common/table/TableToolbar";

const RouterComponent = () => {

    const [data, setData] = React.useState<GatewayRoute[]>([]);
    useEffect(() => {
        RequestHandler.get<GatewayRoute[]>("/manager/admin/route/list")
            .then(res => {
                if (res.success) {
                    setData(res.data);
                }
            });
    }, []);

    return (
        <Card title={"路由列表"}>
            <TableToolbar title={"路由数量"} info={data.length}/>
            <Table<GatewayRoute>
                scroll={{x: 800}}
                dataSource={data}
                columns={[
                    columnDataIndex,
                    {
                        key: 'id',
                        dataIndex: 'id',
                        title: '路由编号',
                        align: "center",
                        width: 100,
                        render: (value, record) => <Link to={"factory"} state={record}>{value}</Link>
                    },
                    {
                        key: 'routeId',
                        dataIndex: 'routeId',
                        title: '路由ID',
                        align: "center"
                    },
                    {
                        key: 'uri',
                        dataIndex: 'uri',
                        title: '路由地址',
                    },
                    {
                        key: 'order',
                        dataIndex: 'order',
                        title: '排序',
                        align: "center",
                        width: 80
                    },
                    {
                        key: 'metadata',
                        dataIndex: 'metadata',
                        title: '元数据',
                    },
                    columnRemark,
                    {
                        key: "options",
                        title: "操作",
                        dataIndex: "options",
                        align: "center",
                        width: 130,
                        fixed: "right",
                        render: (_, record, __) => {
                            return <Space size={15}>
                                <Link key={"router-update"} to={"update"} state={record}>更新</Link>
                            </Space>;
                        }
                    }
                ]}
            />
        </Card>
    );
};

export default RouterComponent;